<template>
	<view class="clock-in-popup" v-if="show">
		<view class="main">
			<image class="close_icon" @click="closed" src="/static/close.svg" mode=""></image>
			<image class="success-icon" src="/static/success.svg" mode=""></image>
			<view class="title">打卡成功</view>
			<view class="achievement">
				<view class="item">
					<view class="num">1</view>
					<view class="lab">已连续打卡</view>
				</view>
				<view class="item">
					<view class="num">1</view>
					<view class="lab">记账总天数</view>
				</view>
				<view class="item">
					<view class="num">1</view>
					<view class="lab">记账总笔数</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			modelValue: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			modelValue: {
				handler (newVal) {
					this.show = newVal
				},
				immediate: true,
			}
		},
		data () {
			return {
				show: false
			}
		},
		methods: {
			closed () {
				this.$emit('update:modelValue', false)
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.clock-in-popup {
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		z-index: 1997;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.main {
			width: 540rpx;
			padding: 32rpx;
			background: #fff;
			box-shadow: 0 10rpx 40rpx -10rpx rgba(0, 64, 128, .2);
			border-radius: 16rpx;
			position: relative;
			padding-top: 46rpx;
			.close_icon {
				position: absolute;
				right: 32rpx;
				top: 32rpx;
				width: 40rpx;
				height: 40rpx;
			}
			.success-icon {
				width: 300rpx;
				height: 200rpx;
				display: block;
				margin: auto;
			}
			.title {
				text-align: center;
				font-weight: 600;
			}
			.achievement {
				padding: 40rpx 0;
				display: flex;
				.item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.num {
						margin-bottom: 10rpx;
						font-size: 36rpx;
						font-weight: 600;
					}
					.lab {
						font-size: 24rpx;
					}
				}
			}
		}
		
	}
</style>